import React, { Component } from 'react';
import { Row, Col, Input, Select, Button, Form, DatePicker } from 'antd';
import '../../customerCenter/customer.css';
import api from '../../../api/api';
const { RangePicker } = DatePicker;

import { testPermission } from '../../common/HasPermission';
const queryKeyChoices = [
  {
    value: 'orderNo',
    label: '视频医生订单号',
    placeholder: '请输入视频医生订单号',
  },

  {
    value: 'insuranceOrderNo',
    label: '服务订单号',
    placeholder: '请输入服务订单号',
  },
  {
    value: 'name',
    label: '服务对象名称',
    placeholder: '请输入服务对象名称',
},
  {
    value: 'uploadDate',
    label: '创建日期',
    placeholder: '请选择创建日期',
  },
];

const insuranceStatus = [
  {
    value: '10',
    label: '待激活',
  },
  {
    value: '20',
    label: '服务中',
  },
  {
    value: '99',
    label: '已完成',
  },
  {
    value: '98',
    label: '已终止',
  },
];
class InsuranceSearch extends Component {
  constructor(props) {
    super(props);
    this.state = {
      insuranceList: [{}],
      insuranceCompany: [{}],
      queryTextPlaceholder: '请输入视频医生订单号',
    };
  }

  componentWillMount() {
    // 获取保险产品列表
    this.getInsuranceProductList();
    // 获取保险公司
    this.getInsuranceCompany();
  }
  // 获取保险产品列表
  getInsuranceProductList = async () => {
    let insuranceList = (await api.getInsuranceProductList()) || [{}];
    insuranceList = insuranceList.map((item) => {
      return {
        value: String(item.productId),
        label: item.productName,
      };
    });
    this.setState({
      insuranceList,
    });
  };
  // 获取承包公司
  getInsuranceCompany = async () => {
    let insuranceCompany = (await api.getInsuranceCompany()) || [{}];
    insuranceCompany = insuranceCompany.map((item) => {
      return {
        value: String(item.companyCode),
        label: item.companyName,
      };
    });
    this.setState({
      insuranceCompany,
    });
  };
  exportFile = () => {
    let formValues = this.props.form.getFieldsValue();
    formValues[formValues.queryKey] = formValues.queryText;
    delete formValues.queryKey;
    delete formValues.queryText;
    if (formValues.uploadDate) {
      formValues.uploadDate = formValues.uploadDate.map((moment) => moment.format('YYYY-MM-DD'));
      formValues.createStart = formValues.uploadDate[0];
      formValues.createEnd = formValues.uploadDate[1];
      delete formValues.uploadDate;
      }
    window.open(`_api/medicOrders/export?orderNo=${formValues.orderNo || ''}&insuranceOrderNo=${formValues.insuranceOrderNo || ''}&name=${formValues.name || ''}&createStart=${formValues.createStart || ''}&createEnd=${formValues.createEnd || ''}&status=${formValues.status || ''}`);
  }
  // 提交数据
  submitForm = (event) => {
    event.preventDefault();
    let formValues = this.props.form.getFieldsValue();
    formValues[formValues.queryKey] = formValues.queryText;
    delete formValues.queryKey;
    delete formValues.queryText;
    if (formValues.uploadDate) {
      formValues.uploadDate = formValues.uploadDate.map((moment) => moment.format('YYYY-MM-DD'));
      formValues.createStart = formValues.uploadDate[0] || '';
      formValues.createEnd = formValues.uploadDate[1] || '';
      delete formValues.uploadDate;
    }
    for (let item in formValues) {
      if (formValues[item] === '' || formValues[item] === undefined) {
        delete formValues[item];
      }
    }

    this.props.searchDataFn(formValues, true);
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const mapChoiceToOption = (choice, i) => (
      <Select.Option key={i} value={choice.value} title={choice.label}>
        {choice.label}
      </Select.Option>
    );
    const dateFormat = 'YYYY-MM-DD';
    let that = this;
    function changeQueryKey(value) {
      let queryTextPlaceholder = queryKeyChoices.find((item) => {
        return item.value === value;
      }).placeholder;
      that.setState({
        queryTextPlaceholder,
      });
    }
    return (
      <Form onSubmit={this.submitForm}>
        <Row gutter={10} className="block filter-box">
          <Col span={4} key="1">
            <Form.Item height="auto">
              {getFieldDecorator('queryKey', {
                initialValue: queryKeyChoices[0].value,
              })(<Select onChange={changeQueryKey.bind(this)} allowClear>{queryKeyChoices.map(mapChoiceToOption)}</Select>)}
            </Form.Item>
          </Col>
          <Col span={4} key="2">
            <Form.Item height="auto">
              {getFieldDecorator('queryText')(<Input placeholder={this.state.queryTextPlaceholder} />)}
            </Form.Item>
          </Col>
          <Col span={4} key="5">
            <Form.Item height="auto">
              {getFieldDecorator(
                'status',
                {},
              )(
                <Select placeholder="请选择视频医生订单状态" allowClear>
                  {insuranceStatus.map(mapChoiceToOption)}
                </Select>,
              )}
            </Form.Item>
          </Col>
          <Col span={6} key="5">
            <Form.Item height="auto">
              {getFieldDecorator(
                'uploadDate',
                {},
              )(<RangePicker format={dateFormat} placeholder={['创建开始时间', '创建结束时间']} />)}
            </Form.Item>
          </Col>
          <Col span={2}>
            <Form.Item>
              <Button style={{ width: '100%', minWidth: 0 }} type="primary" htmlType="submit">
                查询
              </Button>
            </Form.Item>
          </Col>
          {testPermission('medicOrders.export') ? <Col span={2}>
            <Button style={{ width: '100%', minWidth: 0 }} type="primary" onClick={() => this.exportFile()}>
              导出
            </Button>
          </Col> : null}
        </Row>
      </Form>
    );
  }
}

export default Form.create({})(InsuranceSearch);
